<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <table>
    <thead>
    <!--tr显示行，th显示列-->
    <tr>
      <th></th>
      <th>书籍名称</th>
      <th>出版日期</th>
      <th>价格</th>
      <th>购买数量</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="book in books">
      <th>{{book.id}}</th>
      <th>{{book.name}}</th>
      <th>{{book.data}}</th>
      <!--|过滤器-->
      <th>{{book.price | showPrice}}</th>
      <th>
        <button @click="book.count++">+</button>
        {{book.count}}
        <button @click="book.count--" :disabled="book.count<=1">-</button>
      </th>
      <th>
        <button @click="removeBooks(index)">移除</button>
      </th>
    </tr>
    </tbody>
  </table>
  <ul>
    <li v-for="item in dictNum.filter(n => n.fields_type===3)">{{item.name}}</li>
  </ul>
  <div v-if="books.length">
    <h2>总价格:{{getTotalPrice | showPrice}}</h2>
  </div>
  <h2 v-else>购物车为空</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {
          id: 1,
          name: "《算法导论》",
          data: "2020-6",
          price: 12,
          count: 1
        },
        {
          id: 2,
          name: "《数据库》",
          data: "2020-6",
          price: 43,
          count: 1
        },
        {
          id: 3,
          name: "《python》",
          data: "2020-6",
          price: 23,
          count: 1
        }
      ],
      dictNum: [
        {
            "name": "测试时间",
            "alias_name": "testdate",
            "fields_id": "009b27fe-0580-11ec-8b88-000c2959cc0d",
            "fields_type": 2
        },
        {
            "name": "测试时间2",
            "alias_name": "datetime2",
            "fields_id": "33e063d8-061b-11ec-90c1-000c2959cc0d",
            "fields_type": 2
        },
        {
            "name": "测试字段",
            "alias_name": "test1",
            "fields_id": "cc24bf64-0582-11ec-a794-000c2959cc0d",
            "fields_type": 1
        },
        {
            "name": "产品线",
            "alias_name": "product_line",
            "fields_id": "ed72fcf0-e9ee-11eb-a343-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "产品形态",
            "alias_name": "product_form",
            "fields_id": "ed737224-e9ee-11eb-8c21-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "部门",
            "alias_name": "dut",
            "fields_id": "ed73c046-e9ee-11eb-8a5e-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "领域",
            "alias_name": "field",
            "fields_id": "ed780614-e9ee-11eb-b035-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "一级功能",
            "alias_name": "level1",
            "fields_id": "ed787b46-e9ee-11eb-9f18-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "二级功能",
            "alias_name": "level2",
            "fields_id": "ed78f076-e9ee-11eb-bfe3-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "三级功能",
            "alias_name": "level3",
            "fields_id": "ed7965a8-e9ee-11eb-9ba5-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "四级功能",
            "alias_name": "level4",
            "fields_id": "ed79dadc-e9ee-11eb-82bc-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "五级功能",
            "alias_name": "level5",
            "fields_id": "ed7a500c-e9ee-11eb-8c8b-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "六级功能",
            "alias_name": "level6",
            "fields_id": "ed7ac53e-e9ee-11eb-b0c0-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "优先级",
            "alias_name": "priority",
            "fields_id": "ed7b135e-e9ee-11eb-8ff3-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "领域接口人",
            "alias_name": "field_user",
            "fields_id": "ed7b8892-e9ee-11eb-a6b4-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "需求接口人",
            "alias_name": "needs_user",
            "fields_id": "ed7c9a06-e9ee-11eb-9224-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "提交时间",
            "alias_name": "commit_time",
            "fields_id": "ed7ce826-e9ee-11eb-b4a1-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "期望规划版本",
            "alias_name": "Expected_planning_version",
            "fields_id": "ed7d5d58-e9ee-11eb-a54d-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "期望交付时间",
            "alias_name": "Expected_planning_pay_time",
            "fields_id": "ed7dd28a-e9ee-11eb-8d1b-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "业界标准",
            "alias_name": "ndustry_benchmark",
            "fields_id": "ed7e6ecc-e9ee-11eb-acaf-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "新标准",
            "alias_name": "new_normal",
            "fields_id": "ed7ebcee-e9ee-11eb-add9-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "内部提升",
            "alias_name": "PFW",
            "fields_id": "ed7f321e-e9ee-11eb-a0b4-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "运营商测试",
            "alias_name": "ISP_test",
            "fields_id": "ed7fa750-e9ee-11eb-b684-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "我司是否支持",
            "alias_name": "issupport",
            "fields_id": "ed801c82-e9ee-11eb-ab3f-000c2959cc0d",
            "fields_type": 3
        },
        {
            "name": "是否涉及架构调整",
            "alias_name": "isrelatetostruct",
            "fields_id": "ed815508-e9ee-11eb-a677-000c2959cc0d",
            "fields_type": 3
        },
        {
            "name": "具体差距描述",
            "alias_name": "gapdescribe",
            "fields_id": "ed828d8a-e9ee-11eb-ad1a-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "实现路径",
            "alias_name": "path",
            "fields_id": "ed8302be-e9ee-11eb-a405-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "FOSV5状态（季度刷新）",
            "alias_name": "fosv5status",
            "fields_id": "ed8377ee-e9ee-11eb-81ba-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "备注",
            "alias_name": "remarks",
            "fields_id": "ed83ed1e-e9ee-11eb-8ca0-000c2959cc0d",
            "fields_type": 0
        },
        {
            "name": "特性一级",
            "alias_name": "L1",
            "fields_id": "fb63d5a2-0546-11ec-a137-000c2959cc0d",
            "fields_type": 3
        }
  ]
    },
    methods: {
      getFinalPrice(price) {
        return '￥' + price.toFixed(2)
      },
      removeBooks(index) {
        this.books.splice(index, 1)
      }
    },
    filters: {
      showPrice(price) {
        return '￥' + price.toFixed(2)
      }
    },
    computed: {
      getTotalPrice(books) {
        // of的使用
        let totalPrice = 0
        for (let item of this.books) {
          totalPrice += item.price * item.count
        }
        return totalPrice
      }
    }
  })
  // 高阶函数filter/map/reduce
  // filter的回调函数有一个要求就是返回值必须是bool值
  let nums = [10, 20, 30, 40]
  let new2Nums = nums.map(function (n) {
    return n * 2
  })
  let new3Nums = nums.reduce(function (pre, bant) {
    return pre + bant
  })
  console.log(newNums,new2Nums,new3Nums)
  let total = nums.filter(n => n  < 100).map(n => n * 2).reduce((pre, n) => pre + n)
  let new4Nums ="2021-04-23 22:23:40.833649"
  let new4 = new4Nums.split('.')[0]
  console.log('new4', new4)
</script>
</body>
</html>
